<template>
  <div class="spot">
    <swiper :options="swiperOption">
    <swiper-slide v-for="(page,index) of pages" :key="index">
      <ul>
        <li v-for="item of page" :key="item.id">
          <img :src="item.imgurl">
          <p>{{item.name}}</p>
        </li>
      </ul>
    </swiper-slide>
     <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  <ul class="icon-local border-top">
    <li class="border-right">
      <span class="iconfont">&#xe61b;&nbsp;定位失败</span>
    </li>
    <li>
      <span class="iconfont">&#xe610;&nbsp;必游榜单</span>
    </li>
  </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeScenic',
  data () {
    return {
      spotlist: [
        { id: '1', imgurl: 'https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png', name: '景点门票' },
        { id: '2', imgurl: 'https://imgs.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png', name: '故宫' },
        { id: '3', imgurl: 'https://imgs.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png', name: '北京必游' },
        { id: '4', imgurl: 'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/a40ee278d67000f2a29d2e20f6a029b3.png', name: '香山公园' },
        { id: '5', imgurl: 'https://imgs.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png', name: '一日游' },
        { id: '6', imgurl: 'https://imgs.qunarzz.com/piao/fusion/1803/67/9a1678221b8e0e02.png', name: '古北水镇' },
        { id: '7', imgurl: 'https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png', name: '欢乐谷万圣节' },
        { id: '8', imgurl: 'https://imgs.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png', name: '赏红叶' },
        { id: '9', imgurl: 'https://imgs.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png', name: '泡温泉' },
        { id: '10', imgurl: 'https://imgs.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png', name: '天坛公园' }
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },
  computed: {
    pages () {
      let arr = []
      this.spotlist.forEach((obj, index) => {
        let page = Math.floor(index / 8)
        if (!arr[page]) {
          arr[page] = []
        }
        arr[page].push(obj)
      })
      return arr
    }

  }
}
</script>

<style lang='stylus' scoped="scoped">
  .spot >>> .swiper-container
      height 0
      padding-bottom 50%
  .spot
    width 100%
    height 6rem
    overflow hidden
  .spot
     li
      width 25%
      float left
      text-align center
      padding-top 0.2rem
      img
        width 1.1rem
        height 1.1rem
    .icon-local
      height 1rem
      li
        float left
        height 1rem
        width 50%
        text-align center
        line-height 1rem
        span
          font-size 0.28rem

</style>
